<template>
    <div class="tc-tree-select">
        <el-dialog :title="propParams.title" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table
                ref="multipleTable"
                :data="tableData"
                row-key="id"
                border
                stripe
                highlight-current-row
                @current-change="tableCurrentChange"
                @select-all="handleSelectAll"
                @select="handleSelect"
                @selection-change="handleSelectionChange"
                :tree-props="{children: propParams.children, hasChildren: 'hasChildren'}"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    align="center"
                    width="50">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="菜单名称">
                </el-table-column>
            </el-table>
            <div class="footer-btn">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="close">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "treeSelect",
    data(){
        return{
            paramData:{
                search:''
            },
            selectData: [], // 已选择项
            search: {
                search: ''
            },
            tableData: [],
            dialogTableVisible: true,
            allChecked: false
        }
    },
    created(){
        this.initTabelDate()
    },
    props:{
        propColse:Function,
        propParams: {
            type: Object,
            default: {}
        }
        // propChecked: {
        //     type: Boolean,
        //     default: false
        // }
    },
    methods:{
        /**
         * @method 初始化表格数据
         */
        initTabelDate() {
            this.tableData = JSON.parse(this.propParams.tableData)
        },
        close(){
            this.$nextTick(()=>{
                this.propColse()
            })
        },
        tableCurrentChange() {},
        // 勾选全选
        handleSelectAll(selection) {
            this.allChecked = !this.allChecked
            this.tableData.forEach((v, i) => {
                this.$refs.multipleTable.toggleRowSelection(v, this.allChecked)
                v.isChecked = this.allChecked
                if (v[this.propParams.children]) {
                    v[this.propParams.children].forEach((n) => {
                        this.$refs.multipleTable.toggleRowSelection(n, this.allChecked)
                        n.isChecked = this.allChecked
                        // 三级节点
                        if (n[this.propParams.children]) {
                            n[this.propParams.children].forEach((l, n) => {
                                this.$refs.multipleTable.toggleRowSelection(l, this.allChecked)
                                l.isChecked = this.allChecked
                            })
                        }
                    })
                }
            })
        },
        // 勾选单项
        handleSelect(val, row) {
            var isRow = false
            val.forEach((v, i) => {
                if (v.id === row.id) {
                    // 检测当前勾选状态
                    isRow = true
                }
            })
            // 获取点击的所有子节点
            var checkedChild = []
            if (row[this.propParams.children]) {
                row[this.propParams.children].forEach((v,i) => {
                    checkedChild.push(v)
                    // 三级节点
                    if (v[this.propParams.children]) {
                        v[this.propParams.children].forEach((l, n) => {
                            checkedChild.push(l)
                        })
                    }
                })
            }
            // // 勾选
            if (isRow) {
                // this.selectData.push(v)
                row.lookChecked = true
                row.editChecked = true
                row.isChecked = true
                // 选择勾选子节点
                if (row[this.propParams.children]) {
                    row[this.propParams.children].forEach((v,i) => {
                        v.lookChecked = true
                        v.editChecked = true
                        v.isChecked = true
                        // 三级节点
                        if (v[this.propParams.children]) {
                            v[this.propParams.children].forEach((l, n) => {
                                l.lookChecked = true
                                l.editChecked = true
                                l.isChecked = true
                            })
                        }
                    })
                }
                checkedChild.forEach(v => {
                    this.$refs.multipleTable.toggleRowSelection(v, true)
                })
            } else {
                // 非勾选
                row.lookChecked = false
                row.editChecked = false
                row.isChecked = false
                // 选择清空子节点
                if (row[this.propParams.children]) {
                    row[this.propParams.children].forEach((v,i) => {
                        v.lookChecked = false
                        v.editChecked = false
                        v.isChecked = false
                        // 三级节点
                        if (v[this.propParams.children]) {
                            v[this.propParams.children].forEach((l, n) => {
                                l.lookChecked = false
                                l.editChecked = false
                                l.isChecked = false
                            })
                        }
                    })
                }
                checkedChild.forEach(v => {
                    this.$refs.multipleTable.toggleRowSelection(v, false)
                })
            }
        },
        // 勾选改变
        handleSelectionChange(val) {
        },
        onSubmit(){
            // 获取点击的所有子节点
            console.log(this.tableData)
            var checkedChild = []
            this.tableData.forEach((v, i) => {
                if (v.isChecked) {
                    checkedChild.push(v)
                }
                if (v[this.propParams.children]) {
                    v[this.propParams.children].forEach((n) => {
                        if (n.isChecked) {
                            checkedChild.push(n)
                        }
                        // 三级节点
                        if (n[this.propParams.children]) {
                            n[this.propParams.children].forEach((l, n) => {
                                if (l.isChecked) {
                                    checkedChild.push(l)
                                }
                            })
                        }
                    })
                }
            })
            this.propColse(checkedChild)
        }
    }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
